/*
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-08-18 15:06:43
 * @LastEditors: GGB
 * @LastEditTime: 2021-08-18 21:38:49
 */
import 'package:flutter/material.dart';
import 'package:flutter_data_center/components/loading.dart';
import 'package:flutter_data_center/controller/broadcast_controller.dart';
import 'package:flutter_data_center/utills/color_utils.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:line_icons/line_icons.dart';

import 'music_icon.dart';

class PlayingMusic extends StatefulWidget {
  const PlayingMusic({Key key}) : super(key: key);

  @override
  _PlayingMusicState createState() => _PlayingMusicState();
}

class _PlayingMusicState extends State<PlayingMusic> {
  double volume;
  @override
  Widget build(BuildContext context) =>
      GetBuilder<BroadcaseController>(builder: (_controller) {
        if (_controller.playing == null)
          return SizedBox(height: 150, child: Loading());
        return Stack(
          children: [
            SizedBox(
              height: 150,
            ),
            Container(
              width: double.infinity,
              padding: EdgeInsets.symmetric(
                horizontal: 15,
                vertical: 15,
              ),
              height: 130,
              decoration: BoxDecoration(
                color: gColor("#AAF9DC"),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: 20,
                        height: 20,
                        child: SvgPicture.asset(
                          "assets/icon/music_icon.svg",
                        ),
                      ),
                      SizedBox(width: 10),
                      Text(
                        _controller.playing.taskname,
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                      Spacer(),
                      Icon(LineIcons.volumeUp, size: 20),
                      SizedBox(width: 8),
                      Text(
                        "${volume != null ? volume.toInt() : _controller.playing.volume}",
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Padding(
                    padding: const EdgeInsets.only(left: 30),
                    child: Text(
                      _controller.playing.filename,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                        color: gColor("#038656"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Expanded(
                    child: SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        thumbColor: gColor("#08D187"),
                        thumbShape:
                            RoundSliderThumbShape(enabledThumbRadius: 5),
                        trackHeight: 1,
                        activeTrackColor: gColor("#08D187"),
                        inactiveTrackColor: gColor("#000000"),
                      ),
                      child: Slider(
                        min: 0,
                        max: 100,
                        value: volume ?? _controller.playing.volume.toDouble(),
                        onChanged: (v) {
                          setState(() {
                            volume = v;
                          });
                        },
                      ),
                    ),
                  ),
                  MusicIcon(),
                  SizedBox(width: 15),
                ],
              ),
            ),
          ],
        );
      });
}
